import moment from 'moment';
import React from 'react';
import { Table, Descriptions, Card } from 'antd';

class ViewPage extends React.Component<any, any> {
  render() {
    const { data, configData } = this.props;
    const node = data.data;
    const details = data.details;
    const columns = [
      {
        title: '序号',
        dataIndex: 'conLine',
      },
      {
        title: '物料编码',
        dataIndex: 'partNum',
      },
      {
        title: '描述',
        dataIndex: 'partDescription',
      },
      {
        title: '退料数量',
        dataIndex: 'conQty',
      },
      {
        title: '单位',
        dataIndex: 'ium',
      },
    ];
    return (
      <Card bordered={false} key="C1">
        <Descriptions title={<h2 style={{ textAlign: 'center' }}>退料单</h2>} bordered={false}>
          <Descriptions.Item label="退料单号">
            <strong>{node?.conNum}</strong>
          </Descriptions.Item>
          <Descriptions.Item label="公司名称">
            <strong>{configData.companyName}</strong>
          </Descriptions.Item>
          <Descriptions.Item label="退料人">{node?.entryPerson}</Descriptions.Item>
        </Descriptions>
        <Table columns={columns} dataSource={details} pagination={false} bordered size="small" />
        <br />
        <Descriptions bordered={false}>
          <Descriptions.Item label="仓管签字">___________________</Descriptions.Item>
          <Descriptions.Item label="退料人签字">___________________</Descriptions.Item>
          <Descriptions.Item label="制单日期">
            {moment(node?.creationTime).format('YYYY-MM-DD')}
          </Descriptions.Item>
        </Descriptions>
      </Card>
    );
  }
}

export default ViewPage;
